<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- Bootstrap Styles-->
  <link rel="stylesheet" type="text/css"  th:href="@{/css/text/bootstrap.css}"/>
  <link rel="stylesheet" type="text/css"  th:href="@{/css/text/bootstrap-theme.min.css}"/>
  <link rel="stylesheet" type="text/css"  th:href="@{/css/text/bootstrap-admin-theme.css}"/>
  <!-- FontAwesome Styles-->
  <link rel="stylesheet" type="text/css"  th:href="@{/css/text/font-awesome.css}"/>
  <!-- Morris Chart Styles-->
  <link rel="stylesheet" type="text/css"  th:href="@{/css/text/morris-0.4.3.min.css}"/>
  <!-- Custom Styles-->
  <link rel="stylesheet" type="text/css"  th:href="@{/css/text/custom-styles.css}"/>
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <!-- 富文本编辑器 -->
  <script th:src="@{./js/wang.js}"></script>
  <style type="text/css">
    .footer{
      margin-top: 20px;
      background:#222c3a;
      bottom:0;
      width: 100%;
      height: 70px;
      text-align: center;
      color: white;
      position: fixed;
    }

    .footer .footer-top{
      margin-top: 30px;
    }

    .footer a{
      color: #f0f1f1;
      text-decoration: none;
      padding: 0 10px;
      vertical-align:middle;
    }

    .footer a:hover{
      color: red;
      text-decoration: underline;
    }

    .footer p{
      height: 15px;
      color: #888888;
      margin-top: 30px;
    }
  </style>
</head>
<body class="bootstrap-admin-with-small-navbar">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top " role="navigation">
  <div class="container">
    <div class="row">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" th:href="@{../user/index}">GMS</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a th:href="@{../user/index}">首页</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">场地<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a th:href="@{../toPlaceApply1}">预约场地</a></li>
              <li><a th:href="@{../toPlaceUse}">场地使用</a></li>
              <li><a th:href="@{../toUserPlaceApply}">预约退订</a></li>
              <li><a th:href="@{../toStanderDetail}">场地收费标准</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">器材<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a th:href="@{../equipment/showEquipment}" >租借</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">赛事<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a th:href="@{../event/touserevent(pageNum=1,userId=${session.username})}">我的赛事</a></li>
              <li><a th:href="@{../event/toeventcreate}">创建赛事</a></li>
            </ul>
          </li>
          <li class="active">
            <a th:href="@{../notice/tonoticeuser}">网站公告</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li th:if="${session.permission}!='0'" ><a th:href="@{../management}">管理后台</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">用户<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a th:href="@{../user/toChangeuser}">修改资料</a></li>
              <li><a th:href="@{../user/toChangepassword}">修改密码</a></li>
              <li class="divider"></li>
              <li><a th:href="@{/login}">退出登录</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div>
  </div>
</nav>
<div class="container">
  <!-- left, vertical navbar & content -->
  <div class="row">
    <div class="row bootstrap-admin-no-edges-padding">
      <div class="col-md-12">
        <div class="main">      <!--主页面-->
          <div class="equip">
            <form id="rentForm" th:action="@{insertRentOrder}" method="post">
              <div class="col-xs-10 col-sm-8">
                <p class="pull-right visible-xs">
                  <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
                </p>
                <div class="jumbotron">
                  <h1 style="font-size:20px;margin-left: 300px">租借登记</h1>
                  <p style="font-size:15px;margin-left: 300px">
                    器材名称
                    <input type="text" required="required"  name="etypename" th:value="${etypename}" >
                  </p >
                  <!--<p style="font-size:15px">
                      器材类型
                      <input type="text" required="required"  name="etypeid" th:value="${etypeid}" >
                  </p >-->
                  <p style="font-size:15px;margin-left: 300px">租借人
                    <input type="text"  name="userName" required="required" th:value="${session.user.getUserName()}" >
                  </p>
                  <p style="font-size:15px;margin-left: 300px">学号/教工号
                    <input type="text" name="uid"  required="required" th:value="${session.user.getNumber()}" >
                  </p>
                  <p style="font-size:15px;margin-left: 300px">赛事编号
                    <input type="text" name="eventid"  required="required" th:value="${eventid}" th:if="${session.permission}=='3'">
                  </p>
                  <p id="imagePreview" style="margin-left: 300px">
                    <img id="imgid" th:src="@{/static/}+${equippic}" width="150" height="150" />
                  </p>
                  <button style="margin-left: 300px" type="submit" class="btn btn-primary" >租借</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="./js/common.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/examples/offcanvas/offcanvas.js"></script>
</body>
<script type="text/javascript" th:src="@{/js/jquery/lib/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery/dist/jquery.validate.js}"></script>
<script>
  $().ready(function() {
    $("#updateForm").validate({
      rules: {
        etypename: {
          required: true,
          maxlength: 32
        }
      },
      messages: {
        etypename: {
          required: "请输入正确的器材名称",
          maxlength: "器材名称不能超过32字符"
        }
      }
    });
  });
</script>
</html>